<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MutationObserver api 观察者对象，元素加载后自动执行的事件</title>
  </head>
  <body>
    <script>
      // 选择需要观察变动的节点
      const targetNode = document.body;

      // 观察器的配置（需要观察什么变动）
      const config = { attributeFilter: ['id'], childList: true, subtree: true };

      // 当观察到变动时执行的回调函数
      const callback = function (mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
            const dom = mutation.addedNodes[0];
            if(dom.id && dom.localName === 'div'){
              dom.onclick = function (){
                console.error(`%c MutationObserver.html 24 hhahha`,'background:aqua;', {  });
              }
              observer.disconnect();
            }
            console.log('添加或移除元素',{
              id: dom.id,
              localName: dom.localName
            }, mutation);
          } else if (mutation.type === 'attributes') {
            console.log('添加或移除属性', mutation.attributeName, mutation);
          }
        }
      };

      // 创建一个观察器实例并传入回调函数
      const observer = new MutationObserver(callback);

      // 以上述配置开始观察目标节点
      observer.observe(targetNode, config);

      // 之后，可停止观察
      // observer.disconnect();

      let index = 1;

      function addEle() {
        var newElement = document.createElement('div');
        newElement.textContent = '这是一个新元素';
        newElement.id = 'id-' + index;
        document.body.appendChild(newElement);
      }
    </script>
    <button onclick="addEle()">点击添加元素</button>
  </body>
</html>
